<template>
  <div class="shopInfo">
    <div class="imgbanner">
      <!-- <img src="@/assets/img/fanhui.png" alt="" class="back" /> -->
      <!-- <img :src="headerImg | imgPaths" alt="" class="ban" /> -->
      <van-swipe @change="onChange">
        <van-swipe-item :key="index" v-for="(item, index) in headerImg"
          ><img class="ban" :src="item | imgPaths"
        /></van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/{{ headerImg.length }}</div>
        </template>
      </van-swipe>
    </div>
    <div class="content">
      <div class="price">¥{{ objContent.price }}元/只</div>
      <div class="title">{{ objContent.content }}</div>
      <div class="lian">
        <span>{{ objContent.userCallNum }}</span>
        人已联系
      </div>
    </div>
    <div class="jia" v-if="contactList.length > 0">
      <div class="df">
        <img src="@/assets/img/a1.png" alt="" />
        <div class="phone">{{ contactList[0].userTel.substr(0,3) }}****{{ contactList[0].userTel.substr(7) }} 联系了该商品卖家</div>
      </div>

      <div class="time">{{ contactList[0].createTime | dateFormat('YYYY-MM-DD') }}</div>
    </div>
    <div class="info">
      <div class="title">商品描述</div>
      <div class="con">
        <div class="label">品种</div>
        <div class="text">{{ objContent.breedName }}</div>
      </div>
      <div class="con">
        <div class="label">等级</div>
        <div class="text">{{ objContent.gradeName }}</div>
      </div>
    </div>

    <div class="info">
      <div class="title">联系信息</div>
      <div class="con">
        <div class="label">联系人</div>
        <div class="text">{{ objContent.contacts }}</div>
      </div>
      <div class="con">
        <div class="label">联系方式</div>
        <div class="text">{{ objContent.telephone }}</div>
      </div>
      <div class="con">
        <div class="label">地址</div>
        <div class="text">
          {{ objContent.provinceName }}{{ objContent.cityName }}{{ objContent.countyName }}{{ objContent.address }}
        </div>
      </div>
      <div class="con">
        <div class="label">服务时间</div>
        <div class="text">
          {{ objContent.startDate | dateFormat('YYYY-MM-DD') }}至{{ objContent.endDate | dateFormat('YYYY-MM-DD') }}
        </div>
      </div>
    </div>

    <div class="pingjia">
      <div class="title">
        <span>商品评价</span>
        <div @click="goCommodityValuaton()">
          查看全部
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="user" v-if="object.userInfoName != ''">
        <img v-if="object.userHeadPortrait != null" :src="object.userHeadPortrait | imgPaths" alt="" />
        <img v-else src="@/assets/img/defaultAvatar.png" alt="" class="back" />

        <div class="user_info">
          <div>{{ object.userInfoName }}</div>
          <van-rate v-model="object.score" color="#ffd21e" :size="15" />
        </div>
      </div>

      <div class="content2">
        <p>
          {{ object.content }}
        </p>
        <div v-if="object.imgs[0] !== ''">
          <img width="72" height="72" v-for="(item, index) in object.imgs" :key="index" :src="item | imgPaths" alt="" />
        </div>
      </div>
    </div>
    <div class="shop_info">
      <div class="title">
        <div class="name">商品详情</div>
        <div class="see" @click="goDetailDangan">查看羊只档案</div>
      </div>
      <div class="txt" v-html="objContent.details"></div>
    </div>
    <div class="h56"></div>
    <div class="btn" @click="goCallPhone">
      <img src="@/assets/img/telphone.png" alt="" />
      打电话
    </div>
  </div>
</template>

<script>
import { Icon, Rate, Toast, Swipe, SwipeItem } from 'vant'
import { getValue, setValue } from '@/utils/auth'

import { getHandle, postHandle } from '@/api'
export default {
  name: 'ShopInfo',
  components: {
    [Rate.name]: Rate,
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
  data() {
    return {
      value: 4,
      id: getValue('shopInfo-view-id'),
      objContent: {
        uploadImgs: ''
      },
      headerImg: '',
      parms: {
        page: 1,
        perPage: 1,
        shield: 0,
        recordId: getValue('shopInfo-view-id')
      },
      list: [],
      contactList: [],
      current: 0,
      object: {
        imgs: [],
        score: '',
        userInfoName: '',
        userHeadPortrait: '',
        content: ''
      }
    }
  },
  created() {
    this.initialize()
  },
  mounted() {},
  methods: {
    onChange(index) {
      this.current = index
    },
    initialize() {
      getHandle(`/agri/api/common/evaluateInfo/queryListPage`, this.parms).then(res => {
        this.list = res.data.rows
        // alert(this.list[0].userInfoName)
        this.object.userHeadPortrait = this.list[0].userHeadPortrait
        this.object.userInfoName = this.list[0].userInfoName

        this.object.content = this.list[0].content

        this.object.score = this.list[0].score
        this.object.imgs = this.list[0].imgs.split(',')
      })

      getHandle(`/agri/api/yzbzh/contactHistory/queryListPage`, { page: 1, perPage: 10, sheepInfoId: this.id }).then(
        res => {
          this.contactList = res.data.rows
          console.log(res, 999)
        }
      )

      getHandle(`/agri/api/yzbzh/sheepSupplyAndDemand/queryDetail/` + getValue('shopInfo-view-id')).then(res => {
        this.objContent = res.data
        this.headerImg = (!!this.objContent.uploadImgs && this.objContent.uploadImgs.split(',')) || []
      })
    },
    goCallPhone() {
      this.call()
    },

    call() {
      postHandle(`/agri/api/yzbzh/contactHistory/save`, {
        sheepInfoId: this.objContent.id,
        loginUserId: getValue('loginUserId')
      }).then(res => {
        if (res.status === 0) {
          this.$bridge.call('goCallPhone', this.objContent.telephone)
        }
      })
    },

    goCommodityValuaton() {
      this.$bridge.call('commodityValuation')
    },
    goDetailDangan() {
      if (this.objContent.earLabelNo === '') {
        Toast('该商品没有养殖档案')
      } else {
        this.getEarLabelNo(this.objContent.earLabelNo)
      }
    },

    getEarLabelNo(earLabelNo) {
      getHandle(`/agri/api/yzbzh/individual/queryByEarLabelNo/` + earLabelNo).then(res => {
        if (res.data === null) {
          Toast('该商品没有养殖档案')
        } else {
          setValue('sheepRecordInfoId', res.data.id)

          this.$bridge.call('goDetailDangan')
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.h56 {
  height: 56px;
}
.btn {
  width: 100%;
  height: 56px;
  display: flex;
  justify-content: center;
  font-size: 16px;
  color: #ffffff;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #37b5b5;
  img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
}
::v-deep .txt img{
  width: 100%;
}
.shop_info {
  background-color: #fff;
  padding: 15px;
  img {
    width: 100%;
  }
  .txt {
    margin-bottom: 15px;
    // text-indent: 2em;
    text-align: justify;
    line-height: 20px;
    width: 100%!important;
  }
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    .name {
      font-size: 15px;
      color: #333333;
    }
    .see {
      padding: 2px 10px;
      background-color: #37b5b5;
      font-size: 13px;
      color: #ffffff;
      border-radius: 12px;
    }
  }
}
.pingjia {
  background-color: #fff;
  margin-bottom: 10px;
  padding: 15px;
  .user {
    display: flex;
    align-items: center;
    margin-bottom: 15px;

    img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
    .user_info {
      padding: 2px 0;
      height: 40px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      div {
        font-size: 15px;
        color: #333333;
      }
    }
  }
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    span {
      font-size: 15px;
      color: #333333;
    }
    div {
      font-size: 14px;
      color: #999999;
    }
  }
}
.info {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
  padding-bottom: 5px;
  .title {
    font-size: 15px;
    color: #333333;
    margin-bottom: 20px;
  }
  .con {
    display: flex;
    margin-bottom: 15px;
    .label {
      width: 80px;
      margin-right: 20px;
      font-size: 15px;
      color: #999999;
    }
    .text {
      width: calc(100% - 100px);
      font-size: 15px;
      color: #333333;
    }
  }
}
.jia {
  padding: 18px 15px;
  background-color: #fff;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  justify-content: space-between;
  .df {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #333333;
    img {
      width: 20px;
      height: 20px;
      margin-right: 6px;
    }
  }
  .time {
    font-size: 13px;
    color: #999999;
  }
}
.imgbanner {
  position: relative;
  .back {
    position: absolute;
    width: 24px;
    height: 24px;
    left: 15px;
    top: 15px;
    opacity: 0.3;
  }
  .ban {
    width: 100%;
    height: 350px;
  }
}
.content {
  padding: 15px;
  margin-bottom: 10px;
  background-color: #fff;
  .price {
    color: #ff4141;
    font-size: 20px;
    margin-bottom: 15px;
  }
  .title {
    font-size: 18px;
    color: #333333;
    margin-bottom: 15px;
  }
  .lian {
    font-size: 14px;
    color: #666666;
    span {
      color: #ff4141;
    }
  }
}
.content2 {
  > p {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    line-height: 24px;
    margin: 10px 0;
  }
  > div {
    > img {
      margin-right: 12px;
    }
  }
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
</style>
